<template>
  <div class="goal-table-container">
    <h3>课程目标达成度计算结果：</h3>
    <div class="table-wrapper">
      <table class="goal-table">
        <thead>
          <tr>
            <th rowspan="3">毕业要求</th>
            <th rowspan="3">毕业要求指标点</th>
            <th rowspan="3">课程目标</th>
            <th :colspan="evaluationMethods.length * 3">考核环节</th>
            <th rowspan="3">课程分目标达成值</th>
          </tr>
          <tr>
            <th colspan="3" v-for="method in evaluationMethods" :key="method.id">
              {{ method.methodName }}
            </th>
          </tr>
          <tr>
            <template v-for="method in evaluationMethods" :key="`${method.id}-row3`">
              <th>目标值</th>
              <th>平均分</th>
              <th>权重</th>
            </template>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(goal, index) in goalResults" :key="index">
            <td>
              <div v-for="(point, pointIndex) in goal.graduationRequirementPoints" :key="point.id" class="table-requirement-item">
                {{ point.graduationRequirementNumber }}
              </div>
            </td>
            <td>
              <div v-for="(point, pointIndex) in goal.graduationRequirementPoints" :key="point.id" class="table-point-item">
                {{ point.graduationRequirementPointNumber }}({{ point.supportLevel }}={{ getSupportValue(point.supportLevel) }})
              </div>
            </td>
            <td>课程目标{{ goal.number }}</td>
            <template v-for="method in evaluationMethods" :key="`${method.id}-${index}`">
              <td>{{ (goal.methodResults[method.methodName]?.targetValue || 0).toFixed(0) }}</td>
              <td>{{ getAverageScoreDisplay(goal.methodResults[method.methodName]?.targetValue, goal.methodResults[method.methodName]?.averageScore) }}</td>
              <td>{{ goal.methodResults[method.methodName]?.weight || 0 }}</td>
            </template>
            <td>{{ goal.achievementValue }}</td>
          </tr>
          <tr class="total-row">
            <td colspan="3">整体课程目标达成度</td>
            <td :colspan="evaluationMethods.length * 3 + 1">{{ overallAchievement }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  goalResults: {
    type: Array,
    required: true
  },
  evaluationMethods: {
    type: Array,
    required: true
  },
  overallAchievement: {
    type: Number,
    required: true
  }
})

// 调试信息
// console.log('GoalTable props:', {
//   goalResults: props.goalResults,
//   evaluationMethods: props.evaluationMethods,
//   overallAchievement: props.overallAchievement
// })

// 获取支撑度数值
const getSupportValue = (supportLevel) => {
  const supportLevelValues = {
    'H': 3,
    'M': 2,
    'L': 1
  }
  return supportLevelValues[supportLevel] || 0
}

// 获取平均分显示值：如果目标值为0，显示短横线"-"
const getAverageScoreDisplay = (targetValue, averageScore) => {
  if (targetValue === 0 || targetValue === null || targetValue === undefined) {
    return '-'
  }
  return averageScore || 0
}
</script>

<style scoped>
.goal-table-container {
  margin-top: 30px;
}

.goal-table-container h3 {
  margin-bottom: 20px;
  color: #303133;
}

.table-wrapper {
  overflow-x: auto;
}

.goal-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
}

.goal-table th,
.goal-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  font-size: 12px;
}

.goal-table th {
  font-weight: bold;
  color: black;
  background-color: white;
}

.goal-table td {
  color: black;
  background-color: white;
}

.table-requirement-item {
  margin-bottom: 5px;
  padding: 3px 0;
  color: #606266;
}

.table-requirement-item:last-child {
  margin-bottom: 0;
}

.table-point-item {
  margin-bottom: 5px;
  padding: 3px 0;
  color: #606266;
}

.table-point-item:last-child {
  margin-bottom: 0;
}

.total-row {
  font-weight: bold;
}

.total-row td {
  color: black;
  background-color: white;
}
</style>
